package com.example.app.components


import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.*
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import kotlinx.coroutines.launch

@Composable
fun ScaffoldSample() {
    // navigationIcon 左侧图标
    // actions 右侧操作区域
    Scaffold(
        topBar = {
            TopAppBar(title = {
                Text(text = "Title ")
            }, navigationIcon = {
                Icon(imageVector = Icons.Default.NavigateBefore, contentDescription = null)
            }, actions = {
                Icon(imageVector = Icons.Default.Add, contentDescription = null)
                // 设置间距
                Spacer(modifier = Modifier.width(50.dp))
                Text(text = "新增")
            })
        },
        bottomBar = {
            BottomAppBar() {
                Text(text = "bottom bar")
            }
        },
//        scaffoldState = scaffoldState,
//        floatingActionButton = {
//            ExtendedFloatingActionButton(text = {
//               Text(text = "change shape")
//            }, onClick = changeShape,
//            shape = fabShape)
//        },
        // 位置
        floatingActionButtonPosition = FabPosition.Center,
        // 是否固定在底部bar上
        isFloatingActionButtonDocked = true
    ) {
        Text(text = "body")
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ScaffoldSample1() {
    val navs = listOf<String>("Home", "Message", "My")
    var currentIndex by remember {
        mutableStateOf(0)
    }
    // navigationIcon 左侧图标
    // actions 右侧操作区域
    Scaffold(
        topBar = {
            TopAppBar(title = {
                Text(text = "Title ")
            }, navigationIcon = {
                Icon(imageVector = Icons.Default.NavigateBefore, contentDescription = null)
            }, actions = {
                Icon(imageVector = Icons.Default.Add, contentDescription = null)
                // 设置间距
                Spacer(modifier = Modifier.width(50.dp))
                Text(text = "新增")
            })
        },
        bottomBar = {
            BottomNavigation() {
                navs.forEachIndexed { index, s ->
                    BottomNavigationItem(
                        selected = currentIndex == index,
                        onClick = {
                            currentIndex = index
                        },
                        label = {
                            Text(text = "$s")
                        },
                        icon = {
                            // 带有角标的icon(小红点)
                            BadgeBox(badgeContent = {
                                Text(text = "999")
                            }) {
                                Icon(
                                    imageVector = Icons.Default.AccountCircle,
                                    contentDescription = null
                                )
                            }
                        }
                    )
                }
            }
        }
    ) {
        Text(text = "body")
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ScaffoldSample2() {
    // 侧面抽屉API
    val navs = listOf<String>("Home", "Message", "My")
    var currentIndex by remember {
        mutableStateOf(0)
    }
    var scaffoldState = rememberScaffoldState()
    val coroutineScope = rememberCoroutineScope()
    // navigationIcon 左侧图标
    // actions 右侧操作区域
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(title = {
                Text(text = "Title ")
            }, navigationIcon = {
                IconButton(onClick = {
                    // open为挂起
                    coroutineScope.launch {
                        scaffoldState.drawerState.open()
                    }
                }) {
                    Icon(
                        imageVector = Icons.Default.Menu,
                        contentDescription = null
                    )
                }
            }, actions = {
                IconButton(onClick = {
                    // 启动协程
                    coroutineScope.launch {
                        // showSnackbar需要挂起
                        // 底部弹窗
                        scaffoldState.snackbarHostState.showSnackbar("成功", actionLabel = "Down")
                    }
                }) {
                    Icon(
                        imageVector = Icons.Default.Add,
                        contentDescription = null
                    )
                }
                // 设置间距
                Spacer(modifier = Modifier.width(50.dp))
                Text(text = "新增")
            })
        },
        bottomBar = {
            BottomNavigation() {
                navs.forEachIndexed { index, s ->
                    BottomNavigationItem(
                        selected = currentIndex == index,
                        onClick = {
                            currentIndex = index
                        },
                        label = {
                            Text(text = "$s")
                        },
                        icon = {
                            Icon(
                                imageVector = Icons.Default.AccountCircle,
                                contentDescription = null
                            )
                        }
                    )
                }
            }
        },
        drawerContent = {
            Text(text = "Drawer 1")
        },
        // 抽屉背景色
        drawerBackgroundColor = Color.Yellow,
        // 抽屉内容颜色
        drawerContentColor = Color.LightGray,
        // 抽屉外部区域颜色
        drawerScrimColor = Color.Red
    ) {
        Text(text = "body")
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ScaffoldSample3() {
    // 侧面抽屉API
    val navs = listOf<String>("Home", "Message", "My")
    var currentIndex by remember {
        mutableStateOf(0)
    }
    var scaffoldState = rememberBackdropScaffoldState(initialValue = BackdropValue.Concealed)
    val coroutineScope = rememberCoroutineScope()
    // navigationIcon 左侧图标
    // actions 右侧操作区域
    BackdropScaffold(
        scaffoldState = scaffoldState,
        appBar = {
            TopAppBar(title = {
                Text(text = "Title ")
            }, navigationIcon = {
                IconButton(onClick = {
                    if (scaffoldState.isConcealed) {
                        // open为挂起
                        coroutineScope.launch {
                            scaffoldState.reveal()
                        }
                    } else {
                        coroutineScope.launch {
                            scaffoldState.conceal()
                        }
                    }
                }) {
                    if (scaffoldState.isConcealed) {
                        Icon(
                            imageVector = Icons.Default.Menu,
                            contentDescription = null
                        )
                    } else {
                        Icon(
                            imageVector = Icons.Default.Close,
                            contentDescription = null
                        )
                    }
                }
            }, actions = {
                IconButton(onClick = {
                    // 启动协程
                    coroutineScope.launch {
                        // showSnackbar需要挂起
                        // 底部弹窗
                        scaffoldState.snackbarHostState.showSnackbar("成功", actionLabel = "Down")
                    }
                }) {
                    Icon(
                        imageVector = Icons.Default.Add,
                        contentDescription = null
                    )
                }
                // 设置间距
                Spacer(modifier = Modifier.width(50.dp))
                Text(text = "新增")
            })
        },
        frontLayerContent = {
            Text(text = "123")

        },
        backLayerContent = {
            LazyColumn() {
                items(50) {
                    ListItem(text = {
                        Text(text = "item $it")
                    })
                }
            }
        }
    )
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ScaffoldSample4() {
    // 侧面抽屉API
    val navs = listOf<String>("Home", "Message", "My")
    var currentIndex by remember {
        mutableStateOf(0)
    }
    var scaffoldState = rememberBottomSheetScaffoldState()
    val coroutineScope = rememberCoroutineScope()
    // navigationIcon 左侧图标
    // actions 右侧操作区域
    BottomSheetScaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(title = {
                Text(text = "Title ")
            }, navigationIcon = {
                Icon(
                    imageVector = Icons.Default.Close,
                    contentDescription = null
                )
            }, actions = {
                IconButton(onClick = {
                    // 启动协程
                    coroutineScope.launch {
                        // showSnackbar需要挂起
                        // 底部弹窗
                        scaffoldState.snackbarHostState.showSnackbar("成功", actionLabel = "Down")
                    }
                }) {
                    Icon(
                        imageVector = Icons.Default.Add,
                        contentDescription = null
                    )
                }
                // 设置间距
                Spacer(modifier = Modifier.width(50.dp))
                Text(text = "新增")
            })
        },
        // 底部上划弹窗
        sheetContent = {
            // Box 上方显示区域
            Box(
                Modifier
                    .fillMaxWidth()
                    .height(50.dp),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "swaper")
            }
            // Column 底部隐藏区域
            Column(
                Modifier
                    .fillMaxWidth()
                    .padding(64.dp), horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "sheet Content")
                Spacer(modifier = Modifier.height(20.dp))
                Button(onClick = {
                    coroutineScope.launch {
                        scaffoldState.bottomSheetState.collapse()
                    }
                }) {
                    Text(text = "close")
                }
            }
        },
        sheetPeekHeight = 50.dp
    ) {
        Text(text = "123")
    }
}

@Preview(
    showSystemUi = true
)
@Composable
fun ScaffoldSamplePreview() {
    ScaffoldSample4()
}

